<template>
  <div
    ref="box"
    class="x-border w-full h-full absolute z-0 top-0 left-0"
  >
    <div class="triangle one"></div>
    <div class="triangle two"></div>
    <div class="highlight top"></div>
    <div class="highlight right"></div>
    <div class="highlight bottom"></div>
    <div class="highlight left"></div>
    <div class="x-block top">
      <span
        v-for="x in 15"
        :key="`block_top_${x}`"
        :style="{ '--d': `${x - 1}` }"
      ></span>
    </div>
    <div class="x-block bottom">
      <span
        v-for="x in 15"
        :key="`block_top_${x}`"
        :style="{ '--d': `${15 - x}` }"
      ></span>
    </div>
  </div>
</template>

<script
  lang="ts"
  setup
  name="BorderFlow"
>
const box = ref()
const boxW = ref('')
const boxH = ref('')

onMounted(() => {
  const { width, height } = box.value.getBoundingClientRect()
  boxW.value = width + 'px'
  boxH.value = height + 'px'
})
</script>

<style
  scoped
  lang="scss"
>
.x-border {
  border-radius: 6px;
  background: rgba(76, 190, 255, 0.05);

  &::after {
    content: '';
    @apply absolute top-0 left-0 right-0 bottom-0 z-1 backdrop-filter backdrop-blur-28;
    background: rgba(0, 0, 0, 0.25) url("@/assets/images/img-bg.png") no-repeat center center / cover;
    border: 1px solid #12263c;
    border-radius: 6px;
  }

  .x-block {
    @apply absolute flex;
    width: 20%;
    height: 3.5px;

    @keyframes loading {
      0% {
        opacity: 1;
      }

      30% {
        opacity: 0;
      }
    }

    >span {
      display: inline-block;
      height: 100%;
      min-width: 3.448%;
      max-width: 3.448%;
      background-color: #4cbeff;
      animation: loading 3s linear infinite;
      opacity: 0;

      &+span {
        margin-left: 3.448%;
      }
    }

    &.top {
      top: -6px;
      right: 3px;

      >span {
        animation-delay: calc(0.1s * var(--d) + 2.2s);
      }
    }

    &.bottom {
      bottom: -4px;
      left: 3px;

      >span {
        animation-delay: calc(0.1s * var(--d) + 2.2s);
      }
    }
  }

  .highlight {
    @apply absolute;

    &.top,
    &.bottom {
      width: calc(v-bind(boxW) * 0.4);
      height: 2px;
    }

    &.left,
    &.right {
      height: calc(v-bind(boxH) * 0.4);
      width: 2px;
    }

    $v: 3s;

    &.top {
      top: -4px;
      left: 46px;
      background: linear-gradient(270deg, #4cbeff 0%, #ffffff00 100%);
      animation: light-top $v linear infinite;
    }

    &.right {
      top: -1px;
      right: -4px;
      background: linear-gradient(0deg, #4cbeff 0%, #ffffff00 100%);
      transform: scale(0);
      animation: light-right $v linear 3.5s infinite;
    }

    &.bottom {
      bottom: -4px;
      right: 46px;
      background: linear-gradient(90deg, #4cbeff 0%, #ffffff00 100%);
      animation: light-bottom $v linear infinite;
    }

    &.left {
      bottom: -1px;
      left: -4px;
      background: linear-gradient(180deg, #4cbeff 0%, #ffffff00 100%);
      transform: scale(0);
      animation: light-left $v linear 3.5s infinite;
    }
  }

  .triangle {
    @apply absolute z-0;
    width: 54px;
    height: 54px;
    border-radius: 6px;

    &::before,
    &::after {
      content: '';
      @apply absolute;
      border-radius: 6px;
    }

    &::before {
      width: 80%;
      height: 12px;
    }

    &::after {
      width: 12px;
      height: 80%;
    }

    &.one {
      top: -4px;
      left: -4px;
      background: linear-gradient(132deg, #4cbeff 0%, #4cbeff 6%, transparent 56%);

      &::before {
        top: 0;
        left: 4px;
        background: linear-gradient(180deg, #4cbeff 0%, #4cbeff 32.9%, transparent 33%);
      }

      &::after {
        top: 4px;
        left: 0;
        background: linear-gradient(90deg, #4cbeff 0%, #4cbeff 32.9%, transparent 33%);
      }
    }

    &.two {
      bottom: -4px;
      right: -4px;
      background: linear-gradient(316deg, #4cbeff 0%, #4cbeff 6%, transparent 56%);

      &::before {
        bottom: 0;
        right: 4px;
        background: linear-gradient(0deg, #4cbeff 0%, #4cbeff 32.9%, transparent 33%);
      }

      &::after {
        bottom: 4px;
        right: 0;
        background: linear-gradient(-90deg, #4cbeff 0%, #4cbeff 32.9%, transparent 33%);
      }
    }
  }

}

@keyframes light-top {
  0% {
    transform: translateX(0) scaleX(0);
    transform-origin: left;
  }

  40% {
    transform: translateX(calc((v-bind(boxW) - 54px) * 0.023)) scaleX(1);
    transform-origin: left;
  }

  60% {
    transform: translateX(calc((v-bind(boxW) - 54px) * 0.2)) scaleX(1);
    transform-origin: right;
  }

  100% {
    transform: translateX(calc((v-bind(boxW) - 54px) * 0.25)) scaleX(0);
    transform-origin: right;
  }
}

@keyframes light-right {
  0% {
    transform: translateY(0px) scaleY(0);
    transform-origin: top;
  }

  40% {
    transform: translateY(calc((v-bind(boxH) - 54px) * 0.05)) scaleY(1);
    transform-origin: top;
  }

  60% {
    transform: translateY(calc((v-bind(boxH) - 54px) * 0.45)) scaleY(1);
    transform-origin: bottom;
  }

  100% {
    transform: translateY(calc((v-bind(boxH) - 54px) * 0.5)) scaleY(0);
    transform-origin: bottom;
  }
}

@keyframes light-bottom {
  0% {
    transform: translateX(0) scaleX(0);
    transform-origin: right;
  }

  40% {
    transform: translateX(calc((v-bind(boxW) - 54px) * -0.023)) scaleX(1);
    transform-origin: right;
  }

  60% {
    transform: translateX(calc((v-bind(boxW) - 54px) * -0.2)) scaleX(1);
    transform-origin: left;
  }

  100% {
    transform: translateX(calc((v-bind(boxW) - 54px) * -0.23)) scaleX(0);
    transform-origin: left;
  }
}

@keyframes light-left {
  0% {
    transform: translateY(0px) scaleY(0);
    transform-origin: bottom;
  }

  40% {
    transform: translateY(calc((v-bind(boxH) - 54px) * -0.05)) scaleY(1);
    transform-origin: bottom;
  }

  60% {
    transform: translateY(calc((v-bind(boxH) - 54px) * -0.45)) scaleY(1);
    transform-origin: top;
  }

  100% {
    transform: translateY(calc((v-bind(boxH) - 54px) * -0.5)) scaleY(0);
    transform-origin: top;
  }
}</style>